<template>
  <!-- 新碟上架 -->
  <div class="mod-disc mod-bg">
    <div class="container">
      <div class="index-hd">
        <h2 class="index-title">新碟上架</h2>
        <a href="javascript:;" @click="clickItem" class="more-right">
          更多
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>

      <el-carousel
        class="clearfix"
        indicator-position="outside"
        :height="playlistHeight"
        :autoplay="false"
        trigger="click"
      >
        <el-carousel-item class="playlist-item" v-for="item in l" :key="item">
          <ul class="playlist-item-ul clearfix" v-if="showDisc">
            <li
              class="playlist-item-li"
              v-for="dItem in album[item - 1]"
              :key="dItem.id"
            >
              <disc :item="dItem"></disc>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import Disc from "components/disc/Disc.vue";
export default {
  data() {
    return {
      playlistHeight: "264px",
      album: [],
      showDisc: false,
      // 新碟/6 长度
      l: 0,
    };
  },
  components: {
    Disc,
  },
  mounted() {
    this.getPersonalized();
    // // 一开始渲染结束给高度赋值
    // this.$nextTick(() => {
    //   this.playlistHeight =
    //     this.$refs["playlist-item-ul"][0].offsetHeight + "px";
    //   console.log(this.playlistHeight);
    // });
  },
  methods: {
    clickItem() {
      this.$router.push("/albums");
    },
    getPersonalized() {
      this.axios({
        /* 新碟上架接口地址 */
        url: "/top/album?limit=36",
      })
        .then((res) => {
          this.l = Math.ceil(res.data.weekData.length / 6);
          if (this.l > 5) {
            this.l = 5;
          }
          // console.log(this.l);
          // console.log(res.data.weekData);
          for (let i = 0; i < this.l; i++) {
            this.album[i] = res.data.weekData.slice(i * 6, (i + 1) * 6);
          }

          this.showDisc = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-disc .index-hd {
  margin-bottom: 20px;
}
.mod-disc .more-right {
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.mod-disc .playlist-item-li {
  width: 16.6667%;
}
</style>